<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<div id="myChart" class="chart3" style="width:100%; height:100%;"></div>
</body>
<script src="../js/china.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script>
  var chart1 = null;
  $(function () {
    chart3 = echarts.init($(".chart3").get(0));
  });
  setTimeout(function () {
    option = {
      color: ['#3398DB'],
      title: {
        text: '| 出行目的分析',
        subtext: '单位:次',
        textStyle: {
          color: '#057bff'
        },
        subtextStyle: {
          color: '#000'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['观光游览', '休闲度假', '探亲访友', '商务会展', '科技交流', '会议培训', '健康/疗养', '其他'],
          axisLabel: {
            interval:0,
            rotate:40
          },
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type : 'value',
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value}.00%'
          },
          show: true
        }
      ],
      series: [
        {
          name: '',
          type: 'bar',
          barWidth: '30%',
          label: {
            normal: {
              show: true,
              formatter: '{c}%',
              position: 'top',
            }
          },
          data: [10, 52, 60, 30, 40, 35, 20, 40]
        }
      ]
    };
    chart3.setOption(option);
  })
</script>
</html>
